<template>
  <div class="container">
    <!-- 组题列表 -->
    <el-card>
      <!-- 头部部分 -->
      <el-form label-width="80px" class="flex">
        <el-form-item label="关键字" label-width="80px">
          <el-input style="width: 300px" placeholder="根据编号搜索" v-model="searchText"></el-input>
        </el-form-item>
        <div>
          <el-button @click="searchText = null">清除</el-button>
          <el-button type="primary" @click="search">搜索</el-button>
        </div>
      </el-form>
      <el-alert type="info" show-icon :closable="false" style="margin-bottom: 10px">
        <span slot="title"> 数据一共{{ counts }}条 </span>
      </el-alert>

      <!-- 表格部分 -->
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#fafafa', color: '#606266' }">
        <el-table-column prop="id" label="编号" width="220"> </el-table-column>
        <el-table-column prop="questionType" label="题型" :formatter="editType" width="80"> </el-table-column>
        <el-table-column prop="questionIDs" label="题目编号" width="220">
          <template slot-scope="scope">
            <p v-for="(item, index) in scope.row.questionIDs" :key="index" class="questions" @click="currentQuestion(item.id)">{{ item.number }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" width="180"> </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)" width="166"> </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)" width="166"> </el-table-column>
        <el-table-column prop="userName" label="录入人" width="166"> </el-table-column>
        <el-table-column prop="address" label="操作" width="80">
          <template slot-scope="scope">
            <el-tooltip content="删除" placement="bottom" effect="light">
              <el-button icon="el-icon-delete" @click="handleDel(scope.row.id)" type="danger" plain circle></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        style="margin-top: 30px; margin-bottom: 20px; float: right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total,  prev, pager, next, jumper"
        :total="counts"
      >
      </el-pagination>
    </el-card>
    <questions-preview :dialogVisible.sync="dialogVisible" :rowDetail="rowDetail" />
  </div>
</template>

<script>
import { randoms, detail, removeRandoms } from '@/api/hmmm/questions'
import { questionType } from '@/api/hmmm/constants'
import QuestionsPreview from '../components/questions-preview'
export default {
  data () {
    return {
      tableData: [],
      currentPage: 1, // 当前页
      pageSize: 5, // 当前页面容量
      counts: 100, // 当前数据条数
      questionType,
      rowDetail: {}, // 数据
      dialogVisible: false, // 模态框
      searchText: null // 搜索信息
    }
  },
  components: {
    QuestionsPreview
  },
  created () {
    this.getTestList()
  },
  methods: {
    // 页面容量变化
    handleSizeChange (v) {
      this.pageSize = v
    },
    // 当前页码变化
    handleCurrentChange (v) {
      this.currentPage = v
      this.getTestList()
    },
    // 获取当前页面数据
    async getTestList () {
      try {
        const { data } = await randoms({
          page: this.currentPage,
          pagesize: this.pageSize,
          keyword: this.searchText
        })
        // console.log(data)
        this.counts = data.counts
        this.tableData = data.items
        // console.log(this.tableData)
      } catch (error) {
        console.log(error)
      }
    },
    // 格式化题型内容
    editType (row) {
      this.questionType.forEach((item) => {
        if (item.value === +row.questionType) {
          row.questionType = item.label
        }
      })
      return row.questionType
    },
    // 点击当前一项的
    async currentQuestion (id) {
      try {
        this.dialogVisible = true
        const { data } = await detail({
          id: id
        })
        this.rowDetail = data
        console.log(data)
      } catch (error) {
        console.log(error)
      }
    },
    // 搜索数据
    async search () {
      this.getTestList()
    },
    // 删除数据
    async handleDel (v) {
      try {
        await this.$confirm('此操作会将永久删除该文件,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await removeRandoms({ id: v })
          await this.$message({
            type: 'success',
            message: '删除成功!'
          })
          await this.getTestList()
        })
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  padding: 15px 10px;
}
.flex {
  display: flex;
  justify-content: space-between;
}
.questions {
  color: #00b5ff;
  cursor: pointer;
}
</style>
